{% set id = (id ?? "date#{random()}") ~ '-date' -%}
{% set name = name ?? null -%}
{% set value = (value ?? false) ? date(value, false) : null -%}

<div class="datewrapper"
        {%- if block('attr') is defined %} {{ block('attr') }}{% endif %}>
    {%- include "_includes/forms/text" with {
        name: name ? "#{name}[date]" : null,
        autocomplete: false,
        size: 10,
        placeholder: ' ',
        value: value ? value|date('short') : '',
    } -%}
    <div data-icon="date"></div>
    {% if name -%}
        {{ hiddenInput("#{name}[timezone]", craft.app.getTimeZone()) }}
    {%- endif -%}
</div>

{%- js %}
    $('#{{ id|namespaceInputId|e('js') }}').datepicker($.extend({
        defaultDate: new Date({% if value %}{{ value.format('Y') }}, {{ value.format('n')-1 }}, {{ value.format('j') }}{% endif %})
    }, Craft.datepickerOptions));
{%- endjs %}
